import { FC, useEffect } from 'react'
import { Card } from 'antd'
import { useSetState } from 'ahooks'
import Bytemd from '@/components/Bytemd'

const Text = `## 虞美人·春花秋月何时了
### 李煜 

春花秋月何时了？
往事知多少。
小楼昨夜又东风，
故国不堪回首月明中。

雕栏玉砌应犹在，
只是朱颜改。
问君能有几多愁？
恰似一江春水向东流。

### 赏析 

《虞美人》是李煜的代表作，也是李后主的绝命词。相传他于自己生日（七月七日）之夜（“七夕”），在寓所命歌妓作乐，唱新作《虞美人》词，声闻于外。宋太宗闻之大怒，命人赐药酒，将他毒死。这首词通过今昔交错对比，表现了一个亡国之君的无穷的哀怨。

“春花秋月何时了，往事知多少！”三春花开，中秋月圆，岁月不断更替，人生多么美好。可我这囚犯的苦难岁月，什么时候才能完结呢？“春花秋月何时了”表明词人身为阶下囚，怕春花秋月勾起往事而伤怀。回首往昔，身为国君，过去许许多多的事到底做得如何呢，怎么会弄到今天这步田地？据史书记载，李煜当国君时，日日纵情声色，不理朝政，枉杀谏臣……透过此诗句，我们不难看出，这位从威赫的国君沦为阶下囚的南唐后主，此时此刻的心中有的不只是悲苦愤慨，多少也有悔恨之意。

小楼昨夜又东风，故国不堪回首月明中。”小楼又一次春风吹拂，春花又将怒放。回想起南唐的王朝、李氏的社稷——自己的故国却早已被灭亡。诗人身居囚屋，听着春风，望着明月，触景生情，愁绪万千，夜不能寐。一个“又”字，表明此情此景已多次出现，这精神上的痛苦真让人难以忍受。 “又”点明了“春花秋月”的时序变化，词人降宋又苟活了一年，加重了上两句流露的愁绪，也引出词人对故国往事的回忆。
`

const MarkdownEditor: FC = () => {
  const [state, setState] = useSetState({ md: '' })

  useEffect(() => {
    setState({ md: Text })
  }, [])

  // MD改变
  const onMdEditorChange = (value: string) => {
    setState({ md: value })
  }

  return (
    <Card type="inner" title="Markdown编辑器">
      <Bytemd content={state.md} onMdEditorChange={onMdEditorChange} />
    </Card>
  )
}

export default MarkdownEditor
